<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 系统工具</el-breadcrumb-item>
                <el-breadcrumb-item>邮件设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-loading="loading">
            <div>
                <el-form :model="emailForm" :rules="rules" ref="emailForm" label-width="200px">
                <el-row>
                    <el-form-item label="是否启用邮件通知：">
                        <el-radio v-model="emailForm.openFlag" label="true">是</el-radio>
                        <el-radio v-model="emailForm.openFlag" label="false">否</el-radio>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="发送协议：">
                        <el-col :span="6"><el-input v-model="emailForm.protocol"></el-input></el-col>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="发送服务器地址：">
                            <el-col :span="24"><el-input v-model="emailForm.sendServerHost"></el-input></el-col>
                        </el-form-item>     
                    </el-col>
                    <el-col :span="12" style="margin-left:-124px">
                        <el-form-item label="端口：">
                            <el-col :span="6"><el-input type="number" v-model="emailForm.sendPort"></el-input></el-col>
                        </el-form-item>     
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="是否使用SSL：">
                        <el-radio v-model="emailForm.sslFlag" label="true">是</el-radio>
                        <el-radio v-model="emailForm.sslFlag" label="false">否</el-radio>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="发送者：">
                        <el-col :span="6"><el-input v-model="emailForm.sendName"></el-input></el-col>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="发送邮件地址：" prop="sendEmail">
                        <el-col :span="6"><el-input v-model="emailForm.sendEmail"></el-input></el-col>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="发送邮件密码：">
                        <el-col :span="6"><el-input type="password" v-model="emailForm.sendEmailPassword"></el-input></el-col>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="监控异常邮件发送地址：" prop="exceptionAddress">
                        <el-col :span="6"><el-input v-model="emailForm.exceptionAddress"></el-input></el-col>
                    </el-form-item>
                </el-row>
                <!-- <el-row>
                    <el-form-item label="监控异常及时通讯：">
                        <el-col :span="6"><el-input v-model="emailForm.exceptionIm"></el-input></el-col>
                    </el-form-item>
                </el-row> -->
                <div class="btn-container">
                    <el-button @click="dialogVisible = true">发送测试邮件</el-button>
                    <el-button type="primary" @click="save_email('emailForm')" :loading="btnLoading">保存</el-button>
                </div>
                </el-form>
                <el-dialog
                    title="发送测试邮件"
                    :visible.sync="dialogVisible"
                    width="30%"
                >
                    <el-input v-model="testEmail" placeholder="请输入测试邮件"></el-input>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="sendEmail('emailForm')" :loading="btnLoading2">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            loading: true,
            btnLoading: false,
            btnLoading2: false,
            dialogVisible: false,
            testEmail:"",
            //后台参数
            emailForm: {
                openFlag: 'false',
                protocol: "",
                sendServerHost: "",
                sendPort: "",
                sslFlag: "false",
                sendName:"",
                sendEmail:"",
                sendEmailPassword:"",
                exceptionAddress:"",
                exceptionIm:"",
            },
            rules: {
                sendEmail: [
                    { type: 'email', message: '邮箱地址不正确', trigger: 'blur'}
                ],
                exceptionAddress: [
                    { type: 'email', message: '监控异常邮件发送地址不正确', trigger: 'blur'}
                ]
            }
        }
    },
    created() {
        if(localStorage.getItem('pageType') == 0) {
            this.$router.push({ path:'/user' });
        }
    },
    mounted() {
        this.getInfo();
    },
    computed: mapState({
        msg: state => state.system.msg,
        emailInfo: state => state.system.emailInfo
    }),
    methods: {
        save_email(formName) {
            this.btnLoading = true;
            this.$refs[formName].validate((valid) => {
                if(valid) {
                    var params = {
                        openFlag: eval(this.emailForm.openFlag),
                        protocol: this.emailForm.protocol,
                        sendServerHost: this.emailForm.sendServerHost,
                        sendPort: this.emailForm.sendPort,
                        sslFlag: eval(this.emailForm.sslFlag),
                        sendName: this.emailForm.sendName,
                        sendEmail: this.emailForm.sendEmail,
                        sendEmailPassword: this.emailForm.sendEmailPassword,
                        exceptionAddress: this.emailForm.exceptionAddress,
                        exceptionIm:this.emailForm.exceptionIm,
                        sessionId: localStorage.getItem('sessionId')
                    }
                    this.$store.dispatch('saveEmail',params).then(() => {
                        this.btnLoading = false;
                        this.$message(this.msg);
                    })
                }else{
                    this.btnLoading = false;
                    this.$message('异常不能提交！');
                }
            });
        },
        verifyEmail(email) {
            let filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if(filter.test(email)) {
                return true;
            }else{
                return false;
            }
        },
        sendEmail(formName) {
            if(this.testEmail == "" || !this.verifyEmail(this.testEmail)) {
                this.$message('请输入正确的测试邮件');
            }else{
                this.$refs[formName].validate((valid) => {
                    if(valid) {
                        var params = {
                            openFlag: eval(this.emailForm.openFlag),
                            protocol: this.emailForm.protocol,
                            sendServerHost: this.emailForm.sendServerHost,
                            sendPort: this.emailForm.sendPort,
                            sslFlag: eval(this.emailForm.sslFlag),
                            sendName: this.emailForm.sendName,
                            sendEmail: this.emailForm.sendEmail,
                            sendEmailPassword: this.emailForm.sendEmailPassword,
                            exceptionAddress: this.emailForm.exceptionAddress,
                            exceptionIm:this.emailForm.exceptionIm,
                            email: this.testEmail,
                            sessionId: localStorage.getItem('sessionId')
                        }
                        this.btnLoading2 = true;
                        this.dialogVisible = false;
                        this.$store.dispatch('sendEmail',params).then(() => {
                            this.btnLoading2 = false;
                            this.$message(this.msg);
                        })
                    }else{
                        this.btnLoading = false;
                        this.$message('表单数据异常');
                    }
                })
            }
        },
        getInfo() {
            this.$store.dispatch('getInfo',{sessionId: localStorage.getItem('sessionId')})
            .then(() => {
                if(this.msg !== '成功') {
                    this.loading = false;
                    this.$message(this.msg);
                }else{
                    this.loading = false;
                    this.emailForm.openFlag = typeof(this.emailInfo.openFlag) == 'boolean'?this.emailInfo.openFlag.toString(): null;
                    this.emailForm.protocol = this.emailInfo.protocol;
                    this.emailForm.sendServerHost = this.emailInfo.sendServerHost;
                    this.emailForm.sendPort = this.emailInfo.sendPort;
                    this.emailForm.sslFlag = typeof(this.emailInfo.sslFlag) == 'boolean'?this.emailInfo.sslFlag.toString():null;
                    this.emailForm.sendName = this.emailInfo.sendName;
                    this.emailForm.sendEmail = this.emailInfo.sendEmail;
                    this.emailForm.sendEmailPassword = this.emailInfo.sendEmailPassword;
                    this.emailForm.exceptionAddress = this.emailInfo.exceptionAddress;
                    this.emailForm.exceptionIm = this.emailInfo.exceptionIm;
                }
            })
        }
    }
}
</script>
<style scoped>
.btn-container{
    margin: 40px 0 0 255px;
}
input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>


